<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<title></title>
		<style>
			#cav {
				display: block;
				margin: 30px auto;
				box-shadow: 0 0 20px #333;
				background: #333;
			}
		</style>
	</head>

	<body>
		<canvas id="cav" width="1000" height="600"></canvas>
		<script>
			var cav = document.getElementById('cav');
			var ctx = cav.getContext('2d');
			var textArr = [3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 1, 2];
			//将canvas的(0,0)点移到画布的正中央
			ctx.translate(500, 300);
			//绘制表盘（边缘、分钟点、时钟的数字）
			function drawBg() {
				//边缘
				ctx.beginPath();
				ctx.lineWidth = 10;
				ctx.strokeStyle = 'white';
				ctx.arc(0, 0, 150, 0, 2 * Math.PI);
				ctx.stroke();

				//点
				for(var i = 0; i < 60; i++) {
					var deg = i * (Math.PI / 30); //当前度数
					//根据 当前度数，计算出当前小圆圆心的位置
					//绘制小圆，分钟的点半径1，时钟的点，半径设置为2
					//根据上面的位置和半径绘制小圆
					ctx.beginPath();
					var ox = Math.cos(deg) * 135;
					var oy = Math.sin(deg) * 135;
					if(i % 5 == 0) {
						var r = 3;
					} else {
						var r = 1;
					}
					ctx.fillStyle ='white';
					ctx.arc(ox, oy, r, 0, Math.PI * 2);
					ctx.fill();
				}
				//绘制文本；
				ctx.font = '16px Aria';
				ctx.textAlign = 'center';
				ctx.textBaseline = 'middle';
				for(var j = 0; j < textArr.length; j++) {
					var deg = j * (Math.PI / 6);
					var x = Math.cos(deg) * 120;
					var y = Math.sin(deg) * 120;
					ctx.fillText(textArr[j], x, y);
				}
			}
			drawBg();

			//时针
			function drawHour(h, m) {
				ctx.save();
				ctx.beginPath();
				ctx.lineWidth = 8;
				ctx.rotate(Math.PI / 6 * h + Math.PI / 360 * m);
				ctx.lineCap = 'round';
				ctx.moveTo(0, 20);
				ctx.lineTo(0, -70);
				ctx.stroke();
				ctx.restore();
			}
			//			drawHour(3,30);
			//分针
			function drawMin(m, s) {
				ctx.save();
				ctx.beginPath();
				ctx.rotate(Math.PI / 30 * m + Math.PI / 1800 * s);
				ctx.lineCap = 'round';
				ctx.lineWidth = 5;
				ctx.moveTo(0, 20);
				ctx.lineTo(0, -90);
				ctx.stroke();
				ctx.restore();
			}
			//			drawMin(10,30);
			//秒针
			function drawSec(s) {
				ctx.save();
				ctx.beginPath();
				ctx.rotate(Math.PI / 30 * s); //根据秒让秒针旋转
				ctx.moveTo(-2, 20);
				ctx.lineTo(2, 20);
				ctx.lineTo(1, -105);
				ctx.lineTo(-1, -105);
				ctx.closePath();
				ctx.fillStyle = 'red';
				ctx.fill();
				ctx.restore();
			}
			//			drawSec(50);
			function drawCenter() {
				ctx.beginPath();
				ctx.arc(0, 0, 3, 0, Math.PI * 2);
				ctx.fillStyle = 'pink';
				ctx.fill();
			}
			drawCenter();

			function run() {
				ctx.clearRect(-500, -300, 1000, 600);
				//获取当前的时间
				var h = new Date().getHours();
				var m = new Date().getMinutes();
				var s = new Date().getSeconds();
				drawBg();
				drawHour(h, m);
				drawMin(m, s);
				drawSec(s);
				drawCenter();
				window.requestAnimationFrame(run);
			}
			run();
		</script>
	</body>

</html>